<template>
  <view style="padding-bottom: 20rpx; background-color: #fff">
    <view style="position: fixed; top: 0; left: 0; right: 0; background-color: #fff; z-index: 666">
      <q-nav :title="shopInfo.name" />
    </view>
    <view :style="{ height }" />

    <view v-for="(item, index) in decorateList" :key="index">
      <CusSwiper v-if="item.value === 'swiper'" :decoration-properties="item.formData" />
      <view v-if="item.value === 'classification'">
        <view style="padding: 20rpx 28rpx">
          <view class="title">
            <u-image :src="shopInfo.logo" border-radius="12" width="96rpx" height="96rpx" mode="scaleToFill" />
            <view style="flex: 1; margin-left: 12rpx">
              <view class="title__name">
                <view style="display: flex; align-items: center">
                  <view class="title__name--text">
                    {{ shopInfo.name }}
                  </view>
                  <text
                    v-if="shopInfo.shopType && shopInfo.shopType !== 'ORDINARY'"
                    class="title__name--tag"
                    :style="{ background: shopInfo.shopType === 'SELF_OWNED' ? '#fd0505' : '#7728f5' }"
                  >
                    {{ shopType[shopInfo.shopType] }}
                  </text>
                </view>
              </view>
              <view class="title__info">
                月销{{ salesVolumeToStr(shopInfo.sales) }}
                <text style="margin: 0 20rpx">起送￥{{ divTenThousand(shopInfo?.minLimitPrice || 0).toNumber() }}</text>
                <text v-if="shopInfo.distance">距离{{ Number(shopInfo.distance).toFixed(2) }}km</text>
              </view>
            </view>
          </view>
          <view class="tip"> 公告： {{ shopInfo.newTips }} </view>
        </view>
        <view style="border-top: 1rpx solid #c0c0c0; height: 30rpx" />
        <Classification :shopInfo="shopInfo" :decorationProperties="item.formData" />
      </view>
    </view>
    <CarBar ref="carBarRef" :deliveryMoney="divTenThousand(shopInfo?.minLimitPrice || 0).toNumber()" :shopInfo="shopInfo" />
  </view>
</template>

<script setup lang="ts">
import { PropType, defineProps, ref, watch, provide } from 'vue'
import CusSwiper from '@decoration/components/swiper/swiper.vue'
import Classification from './classification/classification.vue'
import CarBar from './components/car-bar.vue'
import { doGetEnablePageByType } from '@/apis/decoration/shop/index'
import QNav from '@/components/q-nav/q-nav.vue'
import { useStatusBar } from '@/hooks'
import { GetShopInfoRes } from '@/apis/o2oshop/model'

const { divTenThousand } = useConvert()
interface ProperType {
  formData: any
  icon: string
  id: string
  label: string
  value: string
}
const props = defineProps({
  shopInfo: {
    type: Object as PropType<GetShopInfoRes & { id: Long }>,
    default: () => ({}),
  },
})
let statusBarHeight = useStatusBar()
const { salesVolumeToStr } = useConvert()
const height = ref('')
// #ifndef H5
height.value = `${statusBarHeight.value}px`
// #endif

//  #ifdef H5
height.value = `${statusBarHeight.value + 44}px`
// #endif

// 购物车
const carBarRef = ref<InstanceType<typeof CarBar>>()
// 更新购物车数据
const carBarRefresh = () => {
  carBarRef.value?.initCarData()
}
// 传递更新购物车数据方法
provide('refreshCar', carBarRefresh)

const shopType = {
  SELF_OWNED: '自营',
  PREFERRED: '优选',
}

// 列表数据
const decorateList = ref<ProperType[]>([])
/**
 * 商铺首页获取装修数据
 */
async function initDecoration() {
  let endpointType = 'H5_APP'
  // #ifdef MP-WEIXIN
  endpointType = 'WECHAT_MINI_APP'
  // #endif
  // #ifndef MP-WEIXIN
  endpointType = 'H5_APP'
  // #endif
  const { code, data } = await doGetEnablePageByType(props.shopInfo.id, endpointType, 'SHOP_HOME_PAGE')
  if (code !== 200) {
    uni.showToast({
      icon: 'none',
      title: '获取装修失败',
    })
    return
  }
  decorateList.value = JSON.parse(data.properties)
}

initDecoration()
</script>

<style scoped lang="scss">
@include b(title) {
  display: flex;
  @include e(name) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    @include m(text) {
      font-size: 32rpx;
      font-weight: 700;
      max-width: 400rpx;
      @include utils-ellipsis(1);
    }
    @include m(tag) {
      padding: 0 10rpx;
      height: 40rpx;
      background-color: #fd0505;
      color: #fff;
      border-radius: 8rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      margin-left: 10rpx;
    }
  }
  @include e(info) {
    margin-top: 20rpx;
    color: #999;
    font-size: 24rpx;
  }
}

@include b(tip) {
  margin-top: 16rpx;
  color: #ff5c53;
  font-size: 24rpx;
}
</style>
